<template>
	<div class="Info-show">
		<div class="Info-show-warpper">
			<div class="info-header clear">
				<div class="info-add pull-left" @click="add">
					<Button type="success">新增角色</Button>
				</div>
			</div>
			<div class="info-table">
				<info-table 
					ref="info-table"
					:thead="thead" 
					:tbody="tbody"
					:total="total"></info-table>
			</div>
		</div>
		
		<info-modal 
			ref="action-modal"
			class="role-action-modal"
			:title="actionTitle">
			<div class="role-form">
				<Form 
					ref="form" 
					:model="formItem" 
					:rules="rules"
					:label-width="80">
			        <FormItem label="角色名称" prop="RoleName">
			            <Input v-model="formItem.RoleName"></Input>
			        </FormItem>
			        <FormItem label="备注" prop="Remark">
			            <Input type="textarea" v-model="formItem.Remark"></Input>
			        </FormItem>
			        <FormItem>
			            <Button type="primary" @click="commitForm">提交</Button>
			            <Button type="ghost" @click="resetForm" style="margin-left: 8px">重置</Button>
			        </FormItem>
				</Form>
			</div>
		</info-modal>
		
		<info-modal 
			ref="role-modal"
			class="role-tree-modal"
			title="权限">
			<div class="role-tree-warpper">
				<role-tree ref="role-tree" :data="roleTreeData" keyStr="name" checkedStr="checked"></role-tree>
				
				<div class="role-tree-commit">
					<Button type="primary" size="small" long @click="commitRole">保存</Button>					
				</div>
			</div>
			
			<loading type="circular" v-show="roleLoading"></loading>
		</info-modal>
		
		<warn-modal 
			title="警告" 
			message="确定要删除该接口？" 
			ref="del-warn"
			@sure="delCommit"></warn-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import RoleTree from 'base/role-tree/RoleTree.vue';
	import { loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin } from 'common/js/mixins';
	import { RoleThead } from 'common/js/table';
	import { RoleRule } from 'common/js/rules';
	import { successNotice, errorNotice } from 'common/js/dom';
	import { getList, updateList, deleteList, getRoleModule, updateRoleModule } from 'api/Role';
	
	export default {
		components: {
			'role-tree': RoleTree
		},
		mixins: [loadingMixin, infoTableMixin, infoModalMixin, warnModalMixin],
		created() {
			this.pIds = [];
			
			this._getList();
		},
		data() {
			return {
				roleTreeData: [],
				formItem: {
					id: '',
					RoleName: '',
					Remark: ''
				},
				rules: RoleRule(),
				actionTitle: '',
				thead: RoleThead(this),
				tbody: [],
				total: 0,
				showLoading: false,
				roleLoading: false
			}
		},
		methods: {
			role(row) {
				this.formItem = row;
				this.$refs['role-modal'].showModal();
				this.roleLoading = true;
				getRoleModule(row.id)
					.then(res => {
						this.roleTreeData = res.permission;
						setTimeout(() => {
							this.$refs['role-tree'].refreshExpand();							
						}, 20)
						this.roleLoading = false;
					})
					.catch(res => {
						this.roleLoading = false;
						errorNotice(res.message);
					})
			},
			filterPid(data) {
				data.map(item => {
					if (item.checked) {
						this.pIds.push(item.action);
					}
					if (item.children && item.children.length) {
						this.filterPid(item.children);
					}
				})
			},
			commitRole() {
				this.showLoading = true;
				let data = this.$refs['role-tree'].getData();
				this.pIds = [];
				this.filterPid(data);
				
				let obj = {
					roleId: this.formItem.id,
					pIds: this.pIds.join(',')
				}
				updateRoleModule(obj)
					.then(res => {
						this.showLoading = false;
						this.$refs['role-modal'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			add() {
				this.resetForm();
				this.actionTitle = '新增角色';
				this.$refs['action-modal'].showModal();
			},
			edit(row) {
				this.formItem = row;
				this.actionTitle = '修改角色';
				this.$refs['action-modal'].showModal();
			},
			commitForm() {
				this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this._updateList(this.formItem);
                    }
                })
			},
			del(row) {
				this.formItem = row;
				this.$refs['del-warn'].showModal();
			},
			delCommit() {
				this._deleteList(this.formItem.id)
			},
			resetForm() {
				this.formItem.id = '';
				this.$refs['form'].resetFields();
			},
			_deleteList(id) {
				this.showLoading = true;
				deleteList(id)
					.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['del-warn'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_updateList(obj) {
				this.showLoading = true;
				updateList(obj)
                	.then(res => {
						this.showLoading = false;
						this.$refs['info-table'].refresh();
						this.$refs['action-modal'].hideModal();
						successNotice('操作成功');
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			},
			_getList(page) {
				this.showLoading = true;
				getList(page)
					.then(res => {
						this.tbody = res.rows;
						this.total = res.total;
						this.showLoading = false;
					}).catch(res => {
						this.showLoading = false;
						errorNotice(res.message);
					})
			}
		}
	}
</script>

<style lang="scss">
	.role-action-modal {
		.ivu-modal {
			width: 400px;			
		}
		.role-form {
			width: 350px;
			margin: 0 auto;
		}
	}
	
	.role-tree-modal {
		.ivu-modal {
			width: 400px;			
		}
		.ivu-modal-body {
			padding: 0;
		}
		.role-tree-warpper {
			width: 400px;
			height: 300px;
			overflow: auto;
			padding: 15px 0 0;
			.role-tree-commit {
				width: 200px;
				margin: 10px auto;
			}
		}
	}
</style>